let product = document.querySelector("#product");
let info = document.querySelector(".carousel .marskSm .info");
// console.log(info);
// console.log(product);


/* 封装渲染数据 */
function products() {
    let res2;
    //获取浏览器的query参数
    function getUrlParams() {
        let href = location.href;
        let regExp = /.+\?(.+)/;
        let param = regExp.exec(href)[1];
        let paramArr = param.split("&");
        let query = {};
        paramArr.forEach((item) => {
            let itemArr = item.split("=");
            query[itemArr[0]] = decodeURI(itemArr[1]);
        });
        return query;
    }
    let query = getUrlParams(); //获取浏览器query参数
    // console.log(query);//{couponId:"1||2||3||4"}
    ajax({
        url: "http://chst.vip:1234/api/getcouponproduct",
        data: { couponid: query.couponId },
        success(res) {
            res2 = res.result;
            let currentArr2 = res2;
            let html = "";
            let html1 = "";
            currentArr2.forEach(item => {
                html += `
                <ul class="info">
                    <li>
                        <div class=" im">
                            <div class="img fl">
                             ${item.couponProductImg} 
                            </div>
                            <div class="infoR">
                                <div class="title">
                                    <h4>
                                            ${item.couponProductName}     
                                    </h4>
                                </div>
                                <div class="down">
                                    <h4>
                                        ${item.couponProductPrice} 
                                    </h4>
                                    <div class="deadline"> 
                                        ${item.couponProductTime} 
                                     </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                            `
                html1 += `
                    <li> ${item.couponProductImg} </li>
                `
            })
            // console.log(html);
            product.innerHTML = html
            info.innerHTML = html1
             /* 左右切换图片 */
             function imgTab() {
                carousel = document.querySelector(".carousel");
                uu = carousel.children
                // console.log(uu);
                arrLeft = uu[0]
                arrRight = uu[2]
                console.log(arrRight);
                info = document.querySelector(".carousel .marskSm .info");
                lis = info.firstElementChild.clientHeight;
                imgs=info.children
                console.log(imgs.length );
                pickIdex = 0;
                // 图片向左
                arrLeft.onclick=function(){
                  pickIdex--;
                  console.log(pickIdex);
                  if(pickIdex>0){
                       console.log(  -pickIdex*lis);
                info.style.left=pickIdex*lis+"px";
                console.log(  info.style.left=-pickIdex*lis+"px");
                  }else{
                      alert("已经是第一张了")
                  }
                }

                // 图片向右
                arrRight.onclick=function(){
                    pickIdex++;
                    if(pickIdex<imgs.length){
                         // console.log(  -pickIdex*lis);
                  info.style.left=pickIdex*lis+"px";
                  console.log(  info.style.left=-pickIdex*lis+"px");
                    }else{
                        alert("已经是最后一张了")
                    }
                   
                  }
            }
            
            imgTab()
            
        },

        error(err, xhr) {
            console.log(err);
        }

    }
    )
}


products()


/* 点击回到顶部 */
let backTop = document.querySelector('.footer-main>div>a')
backTop.onclick = function (e) {
    e.preventDefault()
    let distans = document.documentElement.scrollTop
    // console.log(distans);
    let distansControl = setInterval(function () {
        distans -= 100
        document.documentElement.scrollTop = distans
        if (distans <= 0) {
            clearInterval(distansControl)
        }
    }, 0.5)
}


/* 实现图片的位移 */
let carousel = document.querySelector(".carousel");
let backUp = document.querySelector(".carousel span");
// console.log(backUp);
// console.log();
//图片点击下拉
// product.onclick=function(e){
//     e.preventDefault();
//     pullImg.style.top=0;
// }
// 图片点击返回
// product.onclick=function(e){
//     e.preventDefault();
//     // pullImg.setAttribute("style","top:-100%");
//     let leader =pullImg.style.top;
//     console.log(leader);
// }
/* 图片下拉 */
function animate(target) {
    //获取初始的leader(获取盒子当前的初始位置)
    let leader = -17.786667;
    // console.log(leader);
    //设定一个步数
    let step = 1.77867;
    let timer = setInterval(function () {
        // console.log(12);
        if (leader <= target) {
            //没有到达目标的时候
            leader += step;
            // console.log(leader);
            carousel.style.top = leader + "rem"
        } else {
            //清空定时器
            clearInterval(timer)
        }
    }, 50)
}
product.onclick = function () {
    animate(0);
    // console.log(12);
}
/* 图片返回 */
function animate1(target1) {
    //获取初始的leader(获取盒子当前的初始位置)
    let leader1 = 0;
    // console.log(leader1);
    //设定一个步数
    let step1 = 1.77867;
    let timer1 = setInterval(function () {
        // console.log(12);
        if (leader1 >= target1) {
            //没有到达目标的时候
            leader1 -= step1;
            // console.log(leader1);
            //将leader的结果设定给盒子的left属性
            carousel.style.top = leader1 + "rem"
        } else {
            //清空定时器
            clearInterval(timer1)
        }
    }, 50)
}
backUp.onclick = function () {
    animate1(-17.7867);
    // console.log(12);
}




// /* 图片的显示排他 */
// let imgs= info.children;
// first=imgs.firstElementChild;
// // console.log(first);
// first.setAttribute("class", "active")
// for (var i = 0; i < info.length; i++) {
//     console.log(info.length);
// info[i].index = i;
// info[i].onclick = function () {
//     for (var j = 0; j < tabLis.length; j++) {
//         info[j].className = ""
//     }
//     // console.log(this.index);
//     this.className = "active"
//     // product.innerHTML=products(this.index)
// }
// }